import QtQuick 2.12
import QtQuick.Window 2.12
/*
模型视图代理是一种设计模式，用于将数据模型、视图和代理分开处理；这种分离有助于实现数据与显示的解耦，
使得开发者可以独立地更改数据模型或视图。
模型负责提供数据；代理负责控制数据如何在视图中进行显示；视图负责数据的可视化表示
QML中除ListView、Column、GridView外还有很多可视元素，同样支持模型视图代理，使用方法同理

*/
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    ListView{
        id:myListView
        width: 150
        height: parent.height
        model:ListModel{
            ListElement{content:"ListView"} //给自定义模型添加一组自定义数据content
            ListElement{content:"今天好心情"} //
            ListElement{content:"一键三连发"}
        }
        delegate: Rectangle{//ListView代理使用Rectangle
            width: 150
            height: 50
            color: index % 2 === 0 ? "#30ffaf" : "#f6ff08"
            Text {//文本显示模型自定义数据content
                anchors.centerIn: parent
                text: content;
                font{
                    pointSize: 15
                    bold:true
                }
            }
        }

    }
    //在顶级窗口下继续添加Column布局,添加三组自定义数据，代理使用Rectangle,文本显示模型数据
    Column {
        id: myColumn
        width: 150
        height: parent.height
        anchors.left: myListView.right
        anchors.leftMargin: 2
        Repeater{
            model: ["Column", "宅家看电影", "技术顶呱呱"] //给自定义模型添加3组自定义数据
            delegate: Rectangle{
                width: 150
                height: 50
                color: index % 2 === 0 ? "#30ffaf" : "#f6ff08"
                Text {
                    anchors.centerIn: parent
                    text: modelData;
                    font{
                        pointSize: 15
                        bold: true
                    }
                }
            }
        }
    }
    //在定义窗口下继续添加CridView布局
    GridView {
        id:myGridView
        width:150
        height: parent.height
        anchors.left: myColumn.right
        anchors.leftMargin: 2
        cellWidth: 150
        cellHeight: 50
        model: ListModel{
            ListElement{content:"GridView"}//给自定义模型添加一组自定义数据content
            ListElement{content:"今天好心情"} //
            ListElement{content:"一键三连发"}
        }
        delegate: Rectangle{
            width: 150
            height: 50
            color: index % 2 === 0 ? "#30ffaf" : "#f6ff08"
            Text {
                anchors.centerIn: parent
                text: content; //文本显示模型自定义数据content
                font{
                    pointSize: 15
                    bold: true
                }
            }
        }
    }

}
